import React, { useState, useEffect, useRef } from 'react';
import './Home.css';
import Spmx from '../Spmx/Spmx';
import LinDang from '../../assets/img/notice.gif';
import Yy from '../../assets/img/speaking.jpeg';
import Yy1 from '../../assets/img/speeching.gif';
import TB1 from '../../assets/img/answer-model.svg';
import TB11 from '../../assets/img/answer-icon.svg';
import Xx from '../../assets/img/chat-model.svg';
import Xx1 from '../../assets/img/chat-model-active.svg';
import TA from '../../assets/img/indexLightBackground.png';
import TB from '../../assets/img/bg-day.png';
import qhh from '../../assets/img/day-model.svg';
import qhh1 from '../../assets/img/night-model.svg';
import Video from '../Video/Video';

// 定义语言包
const languagePack = {
    en: {
        switchLanguage: 'Switch Language',
        callPrompt: 'Call "Xiaowei Xiaowei" to start a new conversation',
        switchTheme: 'Switch Theme',
        sendDanmaku: 'Send Danmaku'
    },
    zh: {
        switchLanguage: '切换语言',
        callPrompt: '呼唤"小维小维",开始新一轮对话',
        switchTheme: '切换主题',
        sendDanmaku: '发送弹幕'
    }
};
// 定义语言类型
type Language = 'en' | 'zh';

// 定义弹幕组件
const Danmaku: React.FC<{ text: string; top: number }> = ({ text, top }) => {
    const danmakuRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const danmaku = danmakuRef.current;
        if (danmaku) {
            const screenWidth = window.innerWidth;
            const danmakuWidth = danmaku.offsetWidth;
            const duration = (screenWidth + danmakuWidth) / 100;
            danmaku.style.animationDuration = `${duration}s`;
        }
    }, [text]);

    return (
        <div
            ref={danmakuRef}
            className="danmaku"
            style={{ top: `${top}px` }}
        >
            {text}
        </div>
    );
};

const Home = () => {
    // 控制主题切换
    const [theme, setTheme] = useState(true);
    // 控制语音模块切换
    const [yya, setYya] = useState(true);
    const [bxone, setBxone] = useState(true);
    const [xx, setXx] = useState(true);
    const [ayqh, setAyqh] = useState(true);
    // 控制语言切换
    const [currentLanguage, setCurrentLanguage] = useState<Language>('en');
    // 管理弹幕列表
    const [danmakus, setDanmakus] = useState<string[]>([]);
    // 管理输入框的值
    const [inputValue, setInputValue] = useState('');

    // 生成随机的垂直位置，范围限制在视频区域内
    const videoRef = useRef<HTMLDivElement>(null);
    const getRandomTop = () => {
        if (videoRef.current) {
            const videoHeight = videoRef.current.offsetHeight;
            return Math.floor(Math.random() * (videoHeight - 61));
        }
        return 0;
    };

    // 定义主题切换事件
    const qh = () => {
        setTheme(!theme);
    };
    // 控制语音模块切换
    const Yn = () => {
        setYya(!yya);
    };
    const Djbo = () => {
        setBxone(!bxone);
    };
    const DjbT = () => {
        setXx(!xx);
    };
    const DjbTT = () => {
        setAyqh(!ayqh);
    };
    // 切换语言的函数
    const switchLanguage = () => {
        setCurrentLanguage(currentLanguage === 'en' ? 'zh' : 'en');
    };

    // 发送弹幕的函数
    const sendDanmaku = () => {
        if (inputValue.trim() !== '') {
            setDanmakus([...danmakus, inputValue]);
            setInputValue('');
        }
    };

    // 获取当前语言对应的语言包内容
    const currentPack = languagePack[currentLanguage];

    // 定时生成弹幕
    useEffect(() => {
        const interval = setInterval(() => {
            const sampleDanmakus = [
                '哈哈哈哈！',
                '6666',
                '卡卡卡卡',
                '有趣的弹幕来了'
            ];
            const randomDanmaku = sampleDanmakus[Math.floor(Math.random() * sampleDanmakus.length)];
            setDanmakus([...danmakus, randomDanmaku]);
        }, 3000);

        return () => clearInterval(interval);
    }, [danmakus]);

    // 移除移出屏幕的弹幕
    useEffect(() => {
        const interval = setInterval(() => {
            setDanmakus((prevDanmakus) => {
                return prevDanmakus.slice(-10);
            });
        }, 5000);

        return () => clearInterval(interval);
    }, []);

    return (
        <div className='home'>
            <div className='home-top'></div>
            {/* 主题切换按钮 */}
            <div className='home-content'>
                <img className='home-img' src={theme ? TA : TB} alt="" />
            </div>

            {/* 视频播放模块和弹幕容器 */}
            <div className='home-middle' ref={videoRef}>
                <div className="video-and-danmaku-container">
                    <Video />
                    <div className="danmaku-container">
                        {danmakus.map((danmaku, index) => (
                            <Danmaku key={index} text={danmaku} top={getRandomTop()} />
                        ))}
                    </div>
                </div>
            </div>
            {/* 小维 */}
            <div className='home-r-s'>
                <p className='home-r-p'>{currentPack.callPrompt}</p>
            </div>
            <div className='home-r-img'>
                <img className='home-imgs' src={LinDang} alt="" />
            </div>
            {/* 语音 */}
            <div className='home-bottom'>
                <img className='home-bottom-img' onClick={Yn} src={yya ? Yy : Yy1} alt="" />
            </div>
            {/* 三个按钮 */}
            <>
                <div className='bottom-x'>
                    <img className='bottom-x1' onClick={Djbo} src={bxone ? TB1 : TB11} alt="" />
                </div>
                <div className='bottom-xx'>
                    <img className='bottom-x2' onClick={DjbT} src={xx ? Xx : Xx1} alt="" />
                </div>
                <div className='bottom-xxx'>
                    <img className='bottom-x3' onClick={DjbTT} src={ayqh ? qhh : qhh1} alt="" />
                </div>
            </>

            {/* 模型 */}
            <div className='home-leftr'>
                <Spmx />
            </div>

            <div className='home-Language'>
                {/* 语言切换按钮 */}
                <button onClick={switchLanguage}>{currentPack.switchLanguage}</button>
            </div>
            {/* 切换主题按钮 */}
            <button className='home-btn' onClick={qh}>{currentPack.switchTheme}</button>

            {/* 输入框和发送按钮 */}
            <div className="danmaku-input-container">
                <input
                    type="text"
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                    placeholder="输入弹幕内容"
                />
                <button onClick={sendDanmaku}>发送</button>
            </div>
        </div>
    );
}

export default Home;